<section>
    <h1 class="blue" data-id="#plugins/tables"><i class="ace-icon fa fa-table grey"></i> Tables & Grids</h1>

    <div class="hr hr-double hr32"></div>

    <!-- #section:plugins/tables -->
    <div class="help-content">
        <h3 class="info-title smaller" data-id="#plugins/tables.datatables">dataTables</h3>
        <!-- #section:plugins/tables.datatables -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    dataTables is a table plugin with many options and free or premium addons.
                    <br/>
                    For more details see plugin's page: <a href="http://datatables.net/">datatables.net</a>
                </li>

                <li>
                    To use it, you should include:
                    <br/>
                    <code>assets/js/jquery.dataTables.js</code>
                    <br/>
                    <code>assets/js/jquery.dataTables.bootstrap.js</code>
                </li>

                <li>
                    To enable or disable pagination buttons such as 'next', 'prev', 'last' and 'first',
                    you should edit <code>assets/js/jquery.dataTables.bootstrap.js</code>
                    and modify the part that says <span class="green">//Pagination Buttons</span>
                </li>

                <li>
                    A basic example is as follows:
<pre data-language="javascript">
var myTable = 
 $('#my-table')
 .dataTable({
    /**
    sScrollY: "200px",//enable vertical scrolling
    sScrollX: "100%",
    sScrollXInner: "120%",//enable horizintal scrolling with its content 120% of its container
    bScrollCollapse: true,
    */

    bAutoWidth: false,//for better responsiveness
    aoColumns": [
      { "bSortable": false },
      null, null,null, null, null,
      { "bSortable": false }
    ]
 })
</pre>
                    <code>aoColumns</code> is an array containing info and options for each table column
                    and its element count should match the number of columns.
                    <br/>
                    For more information about <code>aoColumns</code> and other options, please see the plugin's page.
                </li>


                <li>
                    If you want to apply horizontal scrolling (sScrollX) on a bordered table
                    (<code>.table-bordered</code>)
                    you can wrap the table inside a <code>.dataTables_borderWrap</code> element first:
<pre data-language="javascript">
var myTable = 
 $('#my-table')
 .wrap("&lt;div class='dataTables_borderWrap' /&gt;")
 .dataTable({
    //options
 });
</pre>
                </li>

            </ul>
        </div>
        <!-- /section:plugins/tables.datatables -->


        <h3 class="info-title smaller" data-id="#plugins/tables.jqgrid">jqGrid</h3>
        <!-- #section:plugins/tables.jqgrid -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    jqGrid is a table and grid plugin with advanced functionality and many different options
                    <br/>
                    Please make sure you see its page, examples and documentation at:
                    <a href="http://www.trirand.com">www.trirand.com</a>
                </li>

                <li>
                    You can also a build a custom version depending on your needs:
                    <a href="http://www.trirand.com/blog/?page_id=6">http://www.trirand.com/blog/?page_id=6</a>
                </li>

                <li>
                    To use it, you should include:
                    <br/>
                    <code>assets/css/ui.jqgrid.css</code>
                    <br/>
                    <code>assets/js/jqGrid/jquery.jqGrid.src.js</code>
                </li>

                <li>
                    Please note that in our demo example,
                    data source is a local static table but you can retrieve data dynamically from server:
                    <br/>
                    <code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>jqgrid.js</code>
                </li>

                <li>
                    jqGrid has many options and you can choose a different icon for different buttons, etc.
                    <br/>
                    But sometimes you need to dynamically style buttons, icons, checkboxes using Javascript
                    for example when search dialog is displayed.
                </li>

                <li>
                    If you want to style checkboxes dynamically using Javascript, please note that you shouldn't
                    wrap them inside <code>label</code> or jqGrid plugin will not send your data to server properly:
<pre data-language="javascript">
 //inside colModel we have a checkbox
 /**{name: 'stock', index: 'stock', width:70, editable: true, edittype: 'checkbox',
   editoptions: {value:"Yes:No"}, unformat: aceSwitch},*/
 //aceSwitch is the function which styles the checkbox  
 
 function aceSwitch( cellvalue, options, cell ) {
    setTimeout(function(){
        $(cell) .find('input[type=checkbox]')
          .addClass('ace ace-switch ace-switch-5')
          .after('&lt;span class="lbl">&lt;/span>');
    }, 0);
 }
</pre>
                </li>

                <li>
                    To make the grid responsive, you can use the following code:
<pre data-language="javascript">
 var parent_column = $(grid_selector).closest('[class*="col-"]');
 $(window).on('resize.jqGrid', function () {
     $(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width() );
 })
 //optional: resize on sidebar collapse/expand and container fixed/unfixed
 $(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
    if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
       $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
    }
 })
</pre>
                </li>
            </ul>
        </div>
        <!-- /section:plugins/tables.jqgrid -->

    </div>
    <!-- /section:plugins/tables -->
</section>